import React, { Component } from 'react';
import './News_list.css';
import {Table, Button} from 'antd';

const iniData = [
  {
    "title": '参数1',
    "description": '刷新系统ACL，一般用于增加或删除访问接口的情况'
  },
  {
    "title": '参数2',
    "description": '退出所有当前登录的用户'
  },
  {
    "title": '参数3',
    "description": '退出所有当前登录的用户'
  },
  {
    "title": '参数4',
    "description": '退出所有当前登录的用户'
  },
  {
    "title": '参数5',
    "description": '退出所有当前登录的用户'
  },
  {
    "title": '参数6',
    "description": '退出所有当前登录的用户'
  },
  {
    "title": '参数7',
    "description": '退出所有当前登录的用户'
  }
]

export default class Syst_para extends Component{
	constructor(props){
    super(props);
    this.state = {
      data: [],
    }
  }

  componentDidMount = () => {
    this.setState({
      data: iniData
    })
  }
  handleDelete = (i) => {
    const data = this.state.data;
    data.splice(i, 1);
    this.setState({
      data: data
    })
  }

	render(){
    const columns = [
      {
        title: 'title',
        dataIndex: 'title',
      },
      {
        title: 'description',
        dataIndex: 'description',
      },
      {
        title: 'action',
        dataIndex: 'action'
      }
    ]
    const datas = [];
    const dataItem = this.state.data;
    const len = dataItem.length;
    for(let i = 0; i < len; i++){
      datas.push({
        title: dataItem[i].title,
        description: dataItem[i].description,
        action: <span><Button type = 'primary' onClick = {() =>this.handleDelete(i)} >删除</Button></span>
      })
    }
    return(
			<div id="news_list">
        <div className="col-md-12 col-sm-12">
          <h2 >系统参数控制</h2>
          <h4 >您可以查看，刷新以及更新系统相关参数。</h4>
          <Table columns = {columns} dataSource = {datas} 
                        pagination = {{
                            showSizeChanger : true,
                            defaultCurrent : 1,
                            defaultPageSize: 4,
                            // total: len,
                            pageSizeOptions : ['4', '10', '30', '50'],//页数选择
                        }}
                    />
        </div>
      </div>
		)
	}
}